import React, { useState, useEffect } from 'react'
import './index.css'
import { Button, Table, Modal, Input } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import axios from 'axios';
interface listType {
  key: React.Key,
  name: string,
  date: string,
  pic: number,
  tal: string
}
const Home: React.FC = () => {
  const [list, setList] = useState<listType[]>([])
  const [item, setItem] = useState<listType>()
  const getAxiosList = async () => {
    const resp = await axios.get('/api/list')
    setList(resp.data.list)
  }
  useEffect(() => {
    getAxiosList()
  }, [])
  // 对话框
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [form, setForm] = useState<listType>({
    key: '',
    name: '',
    date: '',
    pic: 0,
    tal: ''
  });
  const fors = () => {
    return <div>
      <div style={{ display: 'flex' }}><span style={{ width: '80px' }}>ID：</span><Input type="text" value={item?.key} disabled /></div>
      <div style={{ display: 'flex' }}><span style={{ width: '80px' }}>名字：</span><Input type="text" value={item?.name} /></div>
      <div style={{ display: 'flex' }}><span style={{ width: '80px' }}>电话：</span><Input type="text" value={item?.tal} /></div>
      <div style={{ display: 'flex' }}><span style={{ width: '80px' }}>时间：</span><Input type="text" value={item?.date} /></div>
      <div style={{ display: 'flex' }}><span style={{ width: '80px' }}>金额：</span><Input type="text" value={item?.pic} /></div>
    </div>
  }
  const handleOk = (close: any) => {
    console.log(close)
    setConfirmLoading(true);
    setTimeout(() => {
      setOpen(false);
      setConfirmLoading(false);
    }, 2000);
  };
  const showModal = async (key: string) => {
    console.log(key)
    const resp = await axios.get('/api/item', { params: { key: key } })
    setItem(resp.data.item)
    setOpen(true);
  };
  const handleCancel = () => {
    setOpen(false);
  };
  // 表格
  const columns: ColumnsType<listType> = [
    {
      title: 'ID',
      dataIndex: 'key',
    },
    {
      title: '名字',
      dataIndex: 'name',
    },
    {
      title: '电话',
      dataIndex: 'tal',
    },
    {
      title: '金额',
      dataIndex: 'pic',
    },
    {
      title: '时间',
      dataIndex: 'date',
    },
    {
      title: '操作',
      dataIndex: 'key',
      render: (key) => {
        return <Button type="primary" onClick={() => showModal(key)}>修改</Button>
      }
    },
  ];
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [loading, setLoading] = useState(false);
  const setdeldClick = async () => {
    const resp = await axios.get('/api/dele', { params: { selectedRowKeys: selectedRowKeys } })
    const { code } = resp.data
    if (code === 200) {
      getAxiosList()
    }
  }
  const start = () => {
    setLoading(true);
    setTimeout(() => {
      setdeldClick()
      setSelectedRowKeys([]);
      setLoading(false);
    }, 1000);
  };

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const hasSelected = selectedRowKeys.length > 0;
  return (
    <div className='home'>
      <div style={{ marginBottom: 16 }}>
        <Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
          Reload
        </Button>
        {/* <span style={{ marginLeft: 8 }}>
          {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
        </span> */}
      </div>
      <Table rowSelection={rowSelection} columns={columns} dataSource={list} />
      <Modal
        title="Title"
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        modalRender={() => {
          return <div className='main-tan'>
            <h3>修改</h3>
            <div>
              <div style={{ display: 'flex' }}><span style={{ width: '80px' }}>ID：</span><Input type="text" value={item?.key} disabled /></div>
              <div style={{ display: 'flex' }}><span style={{ width: '80px' }}>名字：</span><Input type="text" value={item?.name} /></div>
              <div style={{ display: 'flex' }}><span style={{ width: '80px' }}>电话：</span><Input type="text" value={item?.tal} /></div>
              <div style={{ display: 'flex' }}><span style={{ width: '80px' }}>时间：</span><Input type="text" value={item?.date} /></div>
              <div style={{ display: 'flex' }}><span style={{ width: '80px' }}>金额：</span><Input type="text" value={item?.pic} /></div>
            </div>
          </div>
        }}
      >

      </Modal>
    </div>
  )
}

export default Home